<template>
  <el-dialog
    class="association-org-comp"
    title="关联机构"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(600)"
    :before-close="handleCancel">
    <div class="table-container">
      <div class="search-container">
        <el-input placeholder="请输入机构名称" v-model="condition"></el-input>
        <el-tooltip
          class="tip-icon"
          effect="dark"
          content="列表中无机构名称，请先在组织结构模块中维护信息"
          placement="top-start">
          <i class="el-icon-question"></i>
        </el-tooltip>
      </div>
      <el-tree
        :data="treeData"
        :default-expand-all="!selectKey"
        :current-node-key="selectKey"
        :indent="24"
        node-key="id"
        ref="tree"
        :highlight-current="true"
        :filter-node-method="filterNode"
        :props="defaultProps"
        @node-click="handleNodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
          </span>
      </el-tree>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        @click="handleCancel">取 消</el-button>
      <el-button
        size="medium"
        :loading="loading"
        type="primary"
        @click="hanldeSave">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // 弹框是否展示
    visible: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 回填数据
    options: {
      type: Object,
      default: () => ({})
    },
    // 用户id
    userId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      treeData: [],
      condition: '',
      selectKey: ''
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.getOrgTree();
        return;
      }
      this.condition = '';
      this.selectKey = '';
    },
    condition(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    /**
     * 获取机构树
     */
    async getOrgTree() {
      const { success, data: {
        data
      }} = await this.$Model.getOrgTree();
      if (success && data) {
        this.treeData = data;
      }
    },
    /**
     * 筛选机构树
     */
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /**
     * 修改权限
     */
    handleNodeClick(data, node) {
      this.selectKey = data.id;
    },
    // 取消
    handleCancel() {
      this.$emit('cancel', true);
    },
    // 保存
    hanldeSave() {
      this.$emit('submit', this.selectKey);
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../assets/styles/dialog";
  .association-org-comp {
    .table-container {
      .search-container {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        .el-input {
          width: calc(100% - 60px);
          margin-right: 20px;
        }
        .tip-icon {
          font-size: 20px;
          cursor: pointer;
          color: $mainColor;
          text-align: center;
        }
      }
      .el-tree {
        min-height: 200px;
        max-height: 450px;
        overflow: auto;
        background: $mainBg;
        color: #fff;
        /deep/ .el-tree-node__content {
          &:hover {
            color: $mainColor;
            background: transparent;
          }
        }
      }
     .el-tree {
        /deep/ .el-tree-node.is-current > .el-tree-node__content {
          color: $mainColor;
          background: $baseBg;
        }
        /deep/ .el-tree-node.is-focusable:not(.is-current) > .el-tree-node__content {
          background: transparent;
        }
      }
    }
  }
</style>
